<html>
<head>
	<meta http-equiv='Content-Type' content='text/html;charset=utf-8' />
    <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
    <script type="text/javascript" src="../../../../x3dom-include.js"></script>
    <script>
        function move_vp(){
            document.getElementById("vp1").setAttribute("position", "-16.32025 9.70721 6.35763");
            document.getElementById("vp1").setAttribute("orientation", "-0.29684 -0.92542 -0.23554 1.28218");
        }
        function set_cot(){
            var vp = document.getElementById('vp1');
            var vm = document.getElementById("x3d").runtime.viewMatrix();
            var vec = new x3dom.fields.SFVec3f(0, 0, 0);
            var cot = vm.multMatrixPnt(vec);
            console.log(vp._x3domNode._nameSpace.doc._viewarea.getViewMatrix());
            console.log(vp._x3domNode._nameSpace.doc._viewarea._transMat);
            console.log(vp._x3domNode._nameSpace.doc._viewarea._rotMat);
            console.log(document.getElementById("x3d").runtime.viewMatrix());
//            var cot = document.getElementById("someUniqueId").runtime.getWorldToCameraCoordinatesMatrix();
//            var cot = document.getElementById("someUniqueId").runtime.viewMatrix();
            console.log(cot);
            document.getElementById('vp1').setAttribute('centerOfRotation', cot);
            document.getElementById('vp1').addEventListener("viewpointChanged", view_changed, false);
        }
        function view_changed(e){
            var pos = e.position;
            e.target.setAttribute('centerOfRotation', pos.x + " " + pos.y + " " + pos.z);
        }
    </script>
</head>
<body>
    <X3D id='x3d' showLog='true' width='800px' height='600px'>
      <Scene DEF='scene'>
          <Viewpoint id="vp1" position="0.00000 1.00000 20.00000" orientation="0.00000 0.00000 0.00000 0.00000" zNear="0.01090" zFar="108.97324" description=""></Viewpoint>
          <Viewpoint id="vp2" position="10.00000 0.00000 10.00000" orientation="0.00000 0.00000 0.00000 0.00000" zNear="0.01090" zFar="108.97324" description=""></Viewpoint>
          <NavigationInfo transitionType="LINEAR"></NavigationInfo>
        <Transform>
          <Transform translation='5 0 0'>
            <Billboard DEF='TREE'>
              <Shape DEF='S'>
                <Appearance>
                  <Material diffuseColor="1 1 0"></Material>
                </Appearance>
                <IndexedFaceSet coordIndex='0 1 2 3'>
                  <Coordinate point='-2 0 0 2 0 0 2 5 0 -2 5 0'></Coordinate>
                  <TextureCoordinate point='0 0 1 0 1 1 0 1'></TextureCoordinate>
                </IndexedFaceSet>
              </Shape>
            </Billboard>
          </Transform>
          <Transform translation='-6 0 -1'>
            <Billboard axisOfRotation='1 0 0'>
              <Shape USE='S'></Shape>
            </Billboard>
          </Transform>
          <Transform translation='0 3.3 0'>
            <Billboard axisOfRotation='0 0 0'>
              <Shape>
                <Appearance>
                  <Material diffuseColor='0 0 0'></Material>
                </Appearance>
                <Text string='"Top of flag pole"'>
                  <FontStyle ></FontStyle>
                </Text>
              </Shape>
            </Billboard>
          </Transform>
          <Billboard>
            <Shape>
              <Appearance DEF='A'>
                <Material></Material>
              </Appearance>
              <IndexedFaceSet coordIndex='0 1 4 3 -1 1 2 5 4 -1 2 0 3 5 -1 3 4 5 -1 6 7 8'>
                <Coordinate point='-0.1 0 -0.1 0 0 0.1 0.1 0 -0.1 -0.1 3 -0.1 0 3 0.1 0.1 3 -0.1 0.1 2.4 0 0.1 2.9 0 -1.4 2.65 -0.8'></Coordinate>
              </IndexedFaceSet>
            </Shape>
          </Billboard>
          <Shape>
            <Appearance>
                <Material diffuseColor="0 0 0"></Material>
            </Appearance>
            <IndexedFaceSet coordIndex='0 1 2 3'>
              <Coordinate point='-50 0 -50 -50 0 50 50 0 50 50 0 -50'></Coordinate>
            </IndexedFaceSet>
          </Shape>
          <DirectionalLight direction='0 1 0'></DirectionalLight>
          <Viewpoint position='0 1.5 10'></Viewpoint>
          <Background skyColor='1 1 1'></Background>
        </Transform>
      </Scene>
    </X3D>
  <input type="button" value="01.set_bind true"
         onclick="document.getElementById('vp1').setAttribute('bind','true');"/>
  <input type="button" value="02.set_bind true"
         onclick="document.getElementById('vp2').setAttribute('bind','true');"/>
  <input type="button" value="set_cot"
         onclick="set_cot()"/>
    
  </body>
</html>
